<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>三码报表系统</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="dist/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="dist/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
  <!-- Select2 -->
  <link rel="stylesheet" href="plugins/select2/select2.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    .nav-tabs-custom>.nav>li>a {
      padding: 2px 10px;
    }

    .tab-menu {
      position: absolute;
      right: 134px;
      left: 60px;
    }

    .nav-tabs .sidebar-toggle {
      float: left;
      background-color: transparent;
      background-image: none;
      padding: 15px 15px;
      font-family: fontAwesome;
    }
  </style>
</head>

<body class="hold-transition skin-blue sidebar-mini fixed">
  <div class="wrapper" id="app">
    <header class="main-header">
      <!-- Logo -->
      <a href="index2.html" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>报</b>表</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>三码</b>报表系统</span>
      </a>
      <!-- Header Navbar: style can be found in header.less -->
      <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button -->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

        <div class="navbar-custom-menu">

          <!-- 报表大类，点击报表大类时，根据报表大类自动加载对应报表菜单 -->
          <ul class="nav navbar-nav tab-menu">
            <li class="active"><a href="index.html"> 三码报表</a></li>
            <li><a href="index2.html"> 低效报表</a></li>
            <li><a href="#"> 配置管理</a></li>
            <li><a href="#"> 系统管理</a></li>
          </ul>

          <ul class="nav navbar-nav">
            <!-- 用户信息: 样式定义于 dropdown.less -->
            <li class="dropdown user user-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs">卢琨</span>
            </a>
              <ul class="dropdown-menu">
                <!-- 用户头像 -->
                <li class="user-header">
                  <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                  <p>
                    Alexander Pierce - Web Developer
                    <small>Member since Nov. 2012</small>
                  </p>
                </li>
                <!-- 用户菜单1 -->
                <li class="user-body">
                  <div class="row">
                    <div class="col-xs-4 text-center">
                      <a href="#">Followers</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Sales</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Friends</a>
                    </div>
                  </div>
                  <!-- /.row -->
                </li>
                <!-- 用户菜单2 -->
                <li class="user-footer">
                  <div class="pull-left">
                    <a href="#" class="btn btn-default btn-flat">个人信息</a>
                  </div>
                  <div class="pull-right">
                    <a href="#" class="btn btn-default btn-flat"> 登出</a>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Control Sidebar Toggle Button -->
            <!-- <li>
            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
          </li> -->
          </ul>
        </div>
      </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
      <!-- sidebar: style can be found in sidebar.less -->
      <section class="sidebar">
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
          <li class="header">MAIN NAVIGATION</li>
          <li>
            <a href="pages/widgets.html">
            <i class="fa fa-dashboard"></i> <span>首页</span>
          </a>
          </li>
          <li class="active treeview">
            <a href="#">
            <i class="fa fa-dashboard"></i> <span>报表分类1</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
            <ul class="treeview-menu">
              <li class="active"><a href="javascript:void(0)" post="views/report.html" target="table1"><i class="fa fa-circle-o"></i> 报表1</a></li>
              <li><a href="javascript:void(0)" post="views/report.html" target="table2"><i class="fa fa-circle-o"></i> 报表2</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-files-o"></i>
            <span>报表分类2</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
            <ul class="treeview-menu">
              <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> 报表1</a></li>
              <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> 报表2</a></li>
              <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> 报表3</a></li>
              <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> 报表4</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-share"></i> <span>报表分类3</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> 报表1</a></li>
              <li>
                <a href="#"><i class="fa fa-circle-o"></i> Level One
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
                <ul class="treeview-menu">
                  <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
                  <li>
                    <a href="#"><i class="fa fa-circle-o"></i> Level Two
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                    <ul class="treeview-menu">
                      <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                      <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
            </ul>
          </li>
        </ul>
      </section>
      <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Main content -->
      <section class="content">
        <div class="row">
          <div class="col-md-12" style="padding-left: 0px; padding-right: 0px; margin-top: -14px;">
            <div class="nav-tabs-custom" id="tab-page">
              <ul class="nav nav-tabs" id="tab-bar" style="background-color: #F0F0F0">
                <li class="active"><a href="#home-tab" data-toggle="tab">首页</a></li>
                <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-expand"></i></a></li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="home-tab"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
      <div class="pull-right hidden-xs">
        <b>Version</b> 1.0.0
      </div>
      <strong>Copyright &copy; 2004-2016 <a href="http://www.kdgcsoft.com">科大国创</a>.</strong> All rights reserved.
    </footer>

  </div>
  <!-- ./wrapper -->

  <!-- jQuery 1.10.2 -->
  <script src="plugins/jQuery/jquery-1.10.2.min.js"></script>
  <script src="plugins/Vue/vue.js"></script>
  <script src="plugins/Vue/axios.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
  <script src="plugins/select2/select2.full.min.js"></script>
  <!-- AdminLTE App -->
  <script src="dist/js/app.js"></script>
  <script src="dist/js/sidemenu.js"></script>

  <script>
    /*$(function () {      
      $('div#home-tab').load('views/addReport.html');

      $('a[post]').click(function () {
        tab_url = $(this).attr("post")
        tab_target = $(this).attr("target")
        tab_name = $(this).text().trim()

        active_tab = $('ul#tab-bar li.active')
        $('ul#tab-bar li.active').removeClass('active')
        $('div.tab-content div.active').removeClass('active')
        html = "<li class='active'><a href='#" + tab_target + "' data-toggle='tab'>" + tab_name + "</a></li>"
        active_tab.after(html)
        html = "<div class='tab-pane active' id='" + tab_target + "'></div>"
        $('div.tab-content').append(html)
        $('div.tab-content div.active').load(tab_url)
      });

      $('i.fa-close').click(function () {
        console.log('close tab')
        $('ul#tab-bar li.active').remove()
        $('div.tab-content div.active').remove()
      });

      $('.pull-right i').click(function () {
        if ($(this).hasClass('fa-expand')) {
          $('.pull-right i').removeClass('fa-expand').addClass('fa-compress')
        } else {
          $('.pull-right i').removeClass('fa-compress').addClass('fa-expand')
        }

      });
    });*/

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        created: function(){
          axios.get('data/menu')
            .then(function(response){
              console.log(response);
            })
            .catch(function(err){
              console.log(err);
            });
        },
        openReport: function(){
        }
      }
    });
  </script>
</body>

</html>